<template>
    <div class="admin-login-center-box">
      <div class="center login-center-box">
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form label-position="right" label-width="100px">
              <el-form-item label="用户名" required>
                <el-input v-model="user.userName" placeholder="用户名"></el-input>
              </el-form-item>
              <el-form-item label="密码" required>
                <el-input v-model="user.password" placeholder="请输入密码" type="password"></el-input>
              </el-form-item>
              <el-form-item label="邮箱地址" required>
                <el-input v-model="user.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" class="login-button" @click="doRegister" > 注 册 </el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </div>
</template>

<script>
  export default {
    name: "register.vue",
    data(){
      return{
        isUserNameOkay:'',
        isCountDowning:false,
        countDownText:'重新发送(60)',
        user:{
          userName:'',
          password:'',
          email:'',
        },
        captchaPath:'',
        verifyCode:'',
        captcha_key:'',
        emailCode:''
      }
    },
    methods:{
      doLogin(){
      },
      updateVerifyCode(){},
      // getVerifyCode(){
      //     let _this = this
      //     if(this.user.email === ''){
      //       this.$message.error("请输入邮箱地址");
      //       return;
      //     }
      //     let reg = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
      //     if (!reg.test(this.user.email)) {
      //       this.$message.error("邮箱格式不正确");
      //       return;
      //     }
      //    this.$axios
      //     .get('/user/verify_code?email='+_this.user.email+'&type=register').then(resp =>{
      //      if (resp.code === 200) {
      //        _this.startCountDown();
      //      }else {
      //        this.$message.error(resp.message);
      //      }
      //    })
      // },
      startCountDown(){
        let _this = this;
        let time = 60;
        this.isCountDowning = true;
        let interval = setInterval(function () {
          //执行倒计时
          time--;
          if(time <= 0){
            _this.isCountDowning = false;
            clearInterval(interval);
          }
          _this.countDownText = '重新发送('+ time + ')';
        },1000)
      },
      checkUserName(){},
      doRegister(){
        let _this = this;
        if(this.user.userName === ''){
          this.$message.error("请输入用户名");
          return;
        }
        if(this.user.password === ''){
          this.$message.error("请输入密码");
          return;
        }
        if(this.user.email === ''){
          this.$message.error("请输入邮箱");
          return;
        }
        this.$axios.post('/users/register',{
          username:_this.user.userName,
          password:_this.user.password,
          email: _this.user.email
        }).then(resp =>{
          if(resp.code === 200 || resp.success === true){
            this.$message.success(resp.msg || resp.message || "注册成功");
            this.$emit('onSubmit')
          }else {
            this.$message.error(resp.message || resp.msg || '注册失败');
          }
        }).catch(err => {
          this.$message.error(err.message || '网络错误');
        })

      }


    },
    mounted() {
      this.captcha_key = ''
    },
  }
</script>

<style scoped>


  .login-center-box .el-input{
    width: 55%;
    float: left;
  }

  .captcha-code{
    cursor: pointer;
    vertical-align: middle;
    margin-left: 10px;
    border:solid 1px #E6E6E6;
    width: 120px;
    padding-left: 10px;
    padding-right: 10px;
    height: 40px;
  }


  .login-button{
    margin-bottom: 0;
    float: left;
  }

  .forget-tips-text a{
    color: #999;
    text-decoration:none;
  }
  .forget-tips-text a:hover{
    color: #A612FF;
  }

  .el-icon-success{
    color: #67C23A;
  }

  .el-icon-error{
    color: #F56C6C;
  }

</style>
